<!DOCTYPE html>
<html lang="en">
    <!-- 这里表示此网页使用的的什么语言,en表示英语,zh表示中文 -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            /* border: black 10px solid;
            transform: rotateZ(45deg) rotateY(45deg) rotateX(45deg); */
            text-align: center;
            background-color: rgb(156, 156, 156);
        }
        /* @keyframes hello{
            0%{text-shadow:black 100px 100px 10px;}
            45%{text-shadow: rgb(65, 156, 4) 00px 130px 10px;}
            75%{text-shadow: rgb(65, 156, 4) -100px 100px 10px;color: white;}
            80%{color: white;}
            100%{
                background-color: rgb(109, 105, 105);
                color: white;
                }
        } */

        /* * {
  margin: 0;
  padding: 0;
} */



.light-btn {
    
  text-decoration: none;
  position: fixed;
  /* left:23%; */
  right: 0;
  bottom: 40px;
  transform: translate(-50%, -50%);
  font-size: 14px;
  background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
  background-size: 400%;
  width: 40px;
  height: 300px;
  line-height:10px;
  color: #fff;
  text-align: center;
  /* text-transform: uppercase; */
  border-radius: 50px;
  z-index: 1;
}

.light-btn:hover::before,
.light-btn:hover {
  animation: sun 8s infinite;
}

.light-btn::before {
  content: '';
  position: absolute;
  left: -5px;
  right: -5px;
  top: -5px;
  bottom: -5px;
  background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
  background-size: 400%;
  border-radius: 50px;
  filter: blur(10px);
  z-index: -1;
}
.light-btn::after{
    animation: sun 8s infinite;
    border: none;
}

@keyframes sun {
  100%{
    background-position: 400% 0;
  }
}

    </style>
</head>
<body>
    <h1>学习笔记</h1>
    <hr>

    <div>
        <h2>
            实体
        </h2>
        <blockquote>
            正常html只会读取一个空格,多余的空格需要自己添加(&nbsp),这个被称作实体
        </blockquote>
        
    </div>
    
    <div>
    <h2>meta标签</h2>
    <blockquote>
        主要用于设置网页的一些元数据,比如charset\name\content\keywords <br>
        一般搜索网页显示的结果都是,网页的title
    </blockquote>
    
    
    < meta name="keywords" content="HTML5笔记,html笔记,css笔记,css3笔记,javascript笔记,js笔记" >
    <br>
    < meta name="description" content="这是非常不错的一个网站" >
    <blockquote>
        html 下方代码设置网页自动跳转
    </blockquote>
    < meta http-equiv="refresh" content="3;url=https:www.baidu.com" >
    </div>

    <div>
        <h2>语义化标签</h2>
        <ol>
            <li>
                标题标签h标签(属于块元素,在页面独占一行属于块元素)
            </li>
            <li>
                p标签(块元素)
            </li>
            <li>
                em重音标签(行内元素,内联元素)
            </li>
            <li>
                span(块元素)
            </li>
            <li>
                ...
            </li>
        </ol>
    </div>

    <div>
        <h2>块和行内</h2>
        <blockquote>
            行内元素一般用来包裹元素
        </blockquote>
        <blockquote>
            一般我们在块元素里面放行内元素,反之则不行
        </blockquote>
    </div>

    <div>
        <button class="light-btn">hello</button>
    </div>
</body>
</html>